<script setup lang="ts">
import type { Tree } from '@/entity/FrontendStruct';
import { onUnmounted, ref } from 'vue';
import TreeComponents, { type Callback } from './TreeComponents.vue';
defineProps<{
    label?: string,
    prop?: string,
    data: Array<Tree>
}>()
const show = ref<boolean>(false)
const select = defineModel<Array<Tree>>({ default: new Array<Tree>() });
const treeCallback: Callback = {
    click: (node: Tree, el: any, treeNode: any, evnet: any) => {
        if (select.value.indexOf(node) == -1) {
            select.value.push(node)
        } else {
            select.value.splice(select.value.indexOf(node), 1)
        }
    }
}
const leave = () => {
    show.value = false;
}
const delKey = (event: KeyboardEvent) => {
    event.preventDefault();
    if (event.code == "Backspace") {
        select.value.pop()
    }
}
const emit = defineEmits(["onOpenTree"]);
onUnmounted(() => { })
</script>
<template>
    <el-form-item :label="label" :prop="prop" class="form-item" @mouseleave="leave">
        <el-input @click="show = !show; if (show) emit('onOpenTree')"
            :value="Array.from(select).map((obj: any) => obj.label)" @keydown="delKey($event)" />
        <div v-if="show" id="trees">
            <tree-components :callback="treeCallback" :data="data">
            </tree-components>
        </div>
    </el-form-item>
</template>
<style lang="css" scoped>
#trees {
    min-width: 250px;
    height: 260px;
    background: rgba(255, 255, 255);
    position: absolute;
    left: 0px;
    bottom: -260px;
    z-index: 1;
    box-shadow: var(--el-box-shadow);
    padding: 5px 5px;
}
</style>